<template>
	<page ref='page'>
		<!-- 房屋档案新建 wwl -->
		<view class="page">
			<view class="list" v-if='status == 0 || status == 4 || status == 6'>
				<view class="row" v-if='status == 4'>
					<view class="bohui">
						上次申请失败原因：{{bohuiyuany}}
					</view>
				</view>
				<view class="row">
					<view class="left">
						商户简称
					</view>
					<view class="right">
						<input type="text" class="right_input"  v-model="infoObj.merchant_shortname"  placeholder="请填写商户简称" placeholder-class="text2"/>
					</view>
				</view>
				
				<view class="row">
					<view class="left">
						身份证姓名
					</view>
					<view class="right">
						<input type="text" class="right_input"  v-model="infoObj.contact_name"  placeholder="请填写身份证姓名" placeholder-class="text2"/>
					</view>
				</view>
				
				<view class="row">
					<view class="left">
						身份证号
					</view>
					<view class="right">
						<input type="text"  placeholder="请填写身份证号" placeholder-class="text2" class="right_input"
							v-model="infoObj.contact_id_card_number" />
					</view>
				</view>
				<view class="row">
					<view class="left">
						身份证开始时间
					</view>
					<view class="right">
						<input type="text" maxlength="8" placeholder="示例值：20281018" placeholder-class="text2" class="right_input"
							v-model="infoObj.id_card_valid_time_begin" />
					</view>
				</view>
				<view class="row">
					<view class="left">
						身份证过期时间
					</view>
					<view class="right">
						<input type="text" maxlength="8" placeholder="示例值：20281018" placeholder-class="text2" class="right_input"
							v-model="infoObj.contact_endtime" />
					</view>
				</view>
				<!-- <view class="row">
					<view class="left">
						邮箱
					</view>
					<view class="right">
						<input type="text" class="right_input" placeholder="请填写邮箱" placeholder-class="text2"
							v-model="infoObj.contact_email" />
					</view>
				</view> -->
				<view class="row">
					<view class="left">
						手机号
					</view>
					<view class="right">
						<input type="number" maxlength="11" class="right_input " placeholder="请填写手机号" placeholder-class="text2"
							v-model="infoObj.mobile_phone" />
					</view>
				</view>
				
				<cityOptions @change='changeCity'  v-if='status == 0 || status == 4'>
					<template slot="info">
						<view class="row">
							<text class="left">银行卡开户区域</text>
							<view class="right right2">
								<view class="text1" v-if="infoObj.zone_id">{{regionName}}</view>
								<view class="text2" v-else>请选省/市/区</view>
								<n-icon name="right" size="32" color='#A4A4A4'></n-icon>
							</view>
						</view>
					</template>
				</cityOptions>
				
				<view class="row" v-if='status == 6'>
					<view class="left">
						银行卡开户区域
					</view>
					<view class="right">
						<input type="text" class="right_input " v-model="infoObj.bank_address_code" />
					</view>
				</view>
				
				<view class="row">
					<view class="left">
						开户银行
					</view>
					<view class="right">
						<input type="text" maxlength="11" class="right_input " placeholder="示例值：建设银行" placeholder-class="text2"
							v-model="infoObj.account_bank" />
					</view>
				</view>
				<view class="row">
					<view class="left">
						开户银行地点
					</view>
					<view class="right">
						<input type="text" maxlength="11" class="right_input " placeholder="示例值：XX市" placeholder-class="text2"
							v-model="infoObj.bank_address" />
					</view>
				</view>
				
				<view class="row">
					<view class="left">
						开户银行全称
					</view>
					<view class="right">
						<!-- <input type="text" class="right_input " placeholder="示例值：中国建设银行股份有限公司北京通州区支行" placeholder-class="text2"
							v-model="infoObj.bank_name" /> -->
						<textarea class="duohang" placeholder="示例值：中国建设银行股份有限公司北京通州区支行" placeholder-class="text2"
							v-model="infoObj.bank_name" id="text" name="text" rows="2" cols="50"></textarea>
					</view>
				</view>
				<view class="row">
					<view class="left">
						开户人姓名
					</view>
					<view class="right">
						<input type="text" maxlength="11" class="right_input " placeholder="需与上边的身份证姓名相同的" placeholder-class="text2"
							v-model="infoObj.account_name" />
					</view>
				</view>
				
				<view class="row">
					<view class="left">
						银行账号
					</view>
					<view class="right">
						<input type="number" maxlength="32" class="right_input " placeholder="请填写银行账号" placeholder-class="text2"
							v-model="infoObj.account_number" />
					</view>
				</view>
				
				
				<view class="row" style="border-bottom:0;">
					<view class="left">
						上传身份证人像图片
					</view>
					<view class="right text2" style="text-align: right;">
						{{infoObj.pic_arr ? 1 : 0}}/1
					</view>
				</view>
				<view class="img_list">
					<block v-if='infoObj.pic_arr && infoObj.pic_arr.length > 0' >
						<view class="img_row" >
							<image :src="infoObj.pic_arr" class="img" mode="scaleToFill"></image>
							<view class="icon"  @click='onDelete()' v-if='status != 6'>
								<image src="https://xiaoqu.wuguoxin.vip/uploads/web/close.png" mode="scaleToFill"></image>
							</view>
						</view>
					</block>
					<view class="img_row" @click='setPhoto(1)' v-if="!infoObj.pic_arr || infoObj.pic_arr.length < 1">
						<image src="https://xiaoqu.wuguoxin.vip/uploads/web/upload01.png" mode="scaleToFill" class="img"></image>
					</view>
				</view>	
				
				<view class="row" style="border-bottom:0;">
					<view class="left">
						上传身份证国徽图片
					</view>
					<view class="right text2" style="text-align: right;">
						{{infoObj.pic_arr2 ? 1 : 0}}/1
					</view>
				</view>
				<view class="img_list">
					<block v-if='infoObj.pic_arr2 && infoObj.pic_arr2.length > 0' >
						<view class="img_row" >
							<image :src="infoObj.pic_arr2" class="img" mode="scaleToFill"></image>
							<view class="icon"  @click='onDelete2()' v-if='status != 6'>
								<image src="https://xiaoqu.wuguoxin.vip/uploads/web/close.png" mode="scaleToFill"></image>
							</view>
						</view>
					</block>
					<view class="img_row" @click='setPhoto2(1)' v-if="!infoObj.pic_arr2 || infoObj.pic_arr2.length < 1">
						<image src="https://xiaoqu.wuguoxin.vip/uploads/web/upload01.png" mode="scaleToFill" class="img"></image>
					</view>
				</view>	
			</view>
			
			<view class="list" v-if='status == 2'>
				<view class="row" >
					<view class="bohui">
						请给以下银行卡汇款并填写对应信息
					</view>
				</view>
				<view class="row">
					<view class="left">
						汇款截止时间
					</view>
					<view class="right">
						<input type="text" class="right_input"  v-model="wx_deadline"  placeholder-class="text2"/>
					</view>
				</view>
				
				<view class="row">
					<view class="left">
						备注信息
					</view>
					<view class="right">
						<input type="text"  class="right_input "  placeholder-class="text2"
							v-model="wx_remark" />
					</view>
				</view>
				<view class="row">
					<view class="left">
						开户银行
					</view>
					<view class="right">
						<input type="text" maxlength="11" class="right_input "  placeholder-class="text2"
							v-model="wx_destination_account_bank" />
					</view>
				</view>
				
				<view class="row">
					<view class="left">
						收款户名
					</view>
					<view class="right">
						<input type="text"  class="right_input "  placeholder-class="text2"
							v-model="wx_destination_account_name" />
					</view>
				</view>
				<view class="row">
					<view class="left">
						汇款金额
					</view>
					<view class="right">
						<input type="number"  class="right_input "  placeholder-class="text2"
							v-model="wx_pay_amount" />
					</view>
				</view>
				
				<view class="row">
					<view class="left">
						收款卡号
					</view>
					<view class="right">
						<input type="number" maxlength="32" class="right_input "  placeholder-class="text2"
							v-model="wx_destination_account_number" />
					</view>
				</view>
				
				
				
			</view>
			
			<view  v-if='status == 2 || status == 5'>
				<view class="saoma">
					<view class="bohui">
						请扫码完成签约，签约完成后返回上一页
					</view>
				</view>
				
				<view class="qrcode">
				  <uqrcode ref="uQRCode" :mode="mode" :text="text" :size="size" :margin="margin" :background-color="backgroundColor" :foreground-color="foregroundColor" :error-correct-level="errorCorrectLevel" :type-number="typeNumber" :file-type="fileType"></uqrcode>
				</view>
				
				<button class="button" type="primary" @click="imgsave('uQRCode')" v-if="mode==='canvas'">保存</button>
			</view>
			<!-- <view class="zhezhao" v-if='status != 0'>
				
			</view> -->
			<view class="bottom_box" v-if='status == 0 ||　status == 4'>
				<button class="btn1" @click="onBack()">取消</button>
				<button class="btn2" :loading='loading' @click="onSave()">提交申请</button>
			</view>
			<view class="bottom_box" v-if='status == 1'>
				<button class="btn2" >资料校验中</button>
			</view>
			<view class="bottom_box" v-if='status == 2'>
				<button class="btn2" >待账户验证</button>
			</view>
			<view class="bottom_box" v-if='status == 3'>
				<button class="btn2" >审核中</button>
			</view>
			<view class="bottom_box" v-if='status == 5'>
				<button class="btn2" >待签约</button>
			</view>
			<view class="bottom_box" v-if='status == 6'>
				<button class="btn2" >审核已通过</button>
			</view>
			<view class="bottom_box" v-if='status == 7'>
				<button class="btn2" >已冻结</button>
			</view>
			<view class="bottom_box" v-if='status == 8'>
				<button class="btn2" >已作废</button>
			</view>
		</view>
	</page>
</template>

<script>
	import {getHouseRecordAdd,getHouseRecordEdit,getHouseRecordInfo,getwxsftaddOrder,getapplymentbohuisOrder,getapplymentmsgOrder,getapplymentsOrder} from "../static/api.js"
	import request from '@/utils/api.js'
	import uQRCode from '@/uni_modules/Sansnn-uQRCode/components/uqrcode/common/uqrcode.js'
	
	export default {
		data() {
			return {
				id:null,
				mode: 'canvas',
				text: '',
				size: 256,
				margin: 10,
				backgroundColor: '#FFFFFF',
				foregroundColor: '#000000',
				errorCorrectLevel: uQRCode.errorCorrectLevel.H,
				typeNumber: -1,
				fileType: 'png',
				status: 0, // 
				loading:false,
				regionName: '',
				bohuiyuany: '',
				wx_deadline: '',
				wx_remark: '',
				wx_destination_account_bank: '',
				wx_destination_account_name: '',
				wx_pay_amount: '',
				wx_destination_account_number: '',
				allloading:false,
				infoObj: {
					zone_arr:'',
					is_default:2,
					zone_id: '',
					account_bank: '',
					account_name: '',
					account_number: '',
					// contact_email: '',
					contact_id_card_number: '',
					contact_name: '',
					merchant_shortname: '',
					id_card_valid_time_begin:'',
					contact_endtime: '',
					mobile_phone: '',
					bank_address: '',
					bank_name: '',
					pic_arr: [],
					pic_arr2: [],
					sf_img: '',
					sf_img2: '',
				}
			}
		},
		methods: {
			//保存图片
			imgsave(id) {
			  uni.showLoading({
			    mask: true,
			    title: '请稍后...'
			  })
			  this.$refs[id].save({
			    success: res => {
			      console.log(res)
			      uni.hideLoading()
			      uni.showToast({
			        icon: 'none',
			        title: res.msg
			      })
			    },
			    fail: err => {
			      uni.hideLoading()
			      uni.showToast({
			        icon: 'none',
			        title: JSON.stringify(err)
			      })
			    }
			  })
			},
			
			onBack() {
				uni.navigateBack()
			},
			// changeDefault(x){
			// 	this.infoObj.is_default  = x
			// },
			async getInfo(){
				uni.showLoading()
				try{
					// var res = await  getHouseRecordInfo({id:this.id})
					// this.infoObj = res
					uni.hideLoading()
				}catch{
					uni.hideLoading()
				}
			},
			//查询驳回原因
			async getbohui(){
				uni.showLoading()
				try{
					var res = await getapplymentbohuisOrder()
					this.bohuiyuany = res;
					console.log(res);
					uni.hideLoading()
				}catch{
					uni.hideLoading()
				}
			},
			//获取申请单信息
			async getpruser(){
				uni.showLoading()
				try{
					var res = await getapplymentmsgOrder({wxyb_type:1})
					
					console.log(res);
					if(res.applyment_state == 2){
						this.text = res.legal_validation_url;
					}
					if(res.applyment_state == 5){
						this.text = res.sign_url;
					}
					this.infoObj = res;
					
					console.log(this.infoObj);
					uni.hideLoading()
				}catch{
					uni.hideLoading()
				}
			},
			//查询二级商户申请状态
			async getapplyments(){
				
				console.log('申请状态');
				
				var res = await getapplymentsOrder()
				console.log(res);
				
			},
			
			async onSave(){
				// console.log(this.infoObj);
				if(this.loading || this.allloading) return
				if (!this.$regular.funShowToast('', this.infoObj.merchant_shortname , '请填写商户简称！')) return false
				if (!this.$regular.funShowToast('', this.infoObj.zone_id , '请选省/市/区！')) return false
				if (!this.$regular.funShowToast('', this.infoObj.account_bank , '请填写开户银行！')) return false
				if (!this.$regular.funShowToast('', this.infoObj.account_name , '请填写开户人姓名！')) return false
				if (!this.$regular.funShowToast('', this.infoObj.account_number , '请填写银行账号！')) return false
				if (!this.$regular.funShowToast('', this.infoObj.contact_id_card_number , '请填写身份证号！')) return false
				if (!this.$regular.funShowToast('', this.infoObj.id_card_valid_time_begin , '请填写身份证开始时间！')) return false
				if (!this.$regular.funShowToast('', this.infoObj.contact_endtime , '请填写身份证过期时间！')) return false
				if (!this.$regular.funShowToast('', this.infoObj.contact_name , '请填写姓名！')) return false
				if (!this.$regular.funShowToast('', this.infoObj.mobile_phone , '请输入手机号！')) return false
				if (!this.$regular.funShowToast('', this.infoObj.bank_address , '请输入开户银行地点！')) return false
				if (!this.$regular.funShowToast('', this.infoObj.bank_name , '请输入开户银行全称！')) return false
				if (!this.$regular.funShowToast(null, this.infoObj.pic_arr && this.infoObj.pic_arr.length > 0 , '请上传身份证人像图片')) return false
				if (!this.$regular.funShowToast(null, this.infoObj.pic_arr2 && this.infoObj.pic_arr2.length > 0 , '请上传身份证国徽图片')) return false
				if(this.status == 0 || this.status == 4){
					this.onFun()
				}
				
			},
			async onFun(){
				// this.loading = true
				try{
					uni.showLoading({
					  mask: true,
					  title: '请稍后...'
					})
					
					if(this.status == 0 || this.status == 4){
						var res = await getwxsftaddOrder(this.infoObj)
						console.log(res);
						uni.hideLoading()
						if(res.code){
							uni.showToast({title:res.message,icon:'none'})
						}else{
							uni.showToast({title:res,icon:'none'})
						}
					}
					
					// this.$global.$editUploadBack(1,'housingArchives')
					
					// //需要刷新页面
					// setTimeout(()=>{
					// 	uni.hideLoading()
					// 	this.loading = false
					// 	uni.navigateBack()
					// },2000)
				}catch{
					uni.hideLoading()
					this.loading = false
				}
			},
			changeCity(e) {
				this.regionName = e.name
				
				console.log(e,'银行卡开户区域');
				this.infoObj.zone_id = e.code[e.code.length-1]
				this.infoObj.zone_arr = e.name
			},
			onDelete() {
				this.infoObj.pic_arr = [];
			},
			onDelete2() {
				this.infoObj.pic_arr2 = [];
			},
			setPhoto() {
				uni.chooseImage({
					count: 1 - this.infoObj.pic_arr.length, //默认9
					sizeType: ['original', 'compressed'], 
					sourceType: ['album'], //从相册选择
					success: (res) => {
						uni.showLoading({mask: false})
						this.allloading = true
						console.log('图片信息');
						console.log(res);
						this.urlTobase64(res.tempFilePaths[0])
						for(let i = 0 ; i <res.tempFilePaths.length ;i++){
							this.$upload(res.tempFilePaths[i]).then(result =>{
								if(result.code == 200){
									this.infoObj.pic_arr.push(result.data.img)
									
									this.urlTobase64(result.data.img)
									
									if(i== res.tempFilePaths.length-1 ){
										this.allloading = false
										this.$forceUpdate()
										uni.hideLoading()
									}
								}
							})
							
						}
						
					}
				});
			},
			setPhoto2() {
				uni.chooseImage({
					count: 1 - this.infoObj.pic_arr2.length, //默认9
					sizeType: ['original', 'compressed'], 
					sourceType: ['album'], //从相册选择
					success: (res) => {
						uni.showLoading({mask: false})
						this.allloading = true
						console.log('图片信息2');
						console.log(res);
						// this.urlTobase642(res.tempFilePaths[0])
						// this.detailImage( res.tempFilePaths[0], (data)=>{})
						// this.infoObj.pic_arr2(res.tempFilePaths[0]);
						// console.log('图片信息a');
						// console.log(this.infoObj.pic_arr2);
						
						for(let i = 0 ; i <res.tempFilePaths.length ;i++){
							this.$upload(res.tempFilePaths[i]).then(result =>{
								if(result.code == 200){
									this.infoObj.pic_arr2.push(result.data.img)
									
									this.urlTobase642(result.data.img)
									
									if(i== res.tempFilePaths.length-1 ){
										this.allloading = false
										this.$forceUpdate()
										uni.hideLoading()
									}
								}
							})
							
						}
						
					}
				});
			},
			urlTobase64(url){
			    uni.request({
				url: url,
				method:'GET',
				responseType: 'arraybuffer',
				success: ress => {
					let base64 = uni.arrayBufferToBase64(ress.data); //把arraybuffer转成base64 
					// base64 = 'data:image/jpeg;base64,' + base64 //不加上这串字符，在页面无法显示的哦
					// console.log(base64)
					
					this.infoObj.sf_img = base64;
				}
			    })
			},
			urlTobase642(url){
			    uni.request({
				url: url,
				method:'GET',
				responseType: 'arraybuffer',
				success: ress => {
					let base64 = uni.arrayBufferToBase64(ress.data)
					// let base64 = wx.arrayBufferToBase64(ress.data); //把arraybuffer转成base64 
					// base64 = 'data:image/jpeg;base64,' + base64 //不加上这串字符，在页面无法显示的哦
					// console.log(base64)
					this.infoObj.sf_img2 = base64;
				}
			    })
			},
			// detailImage(path, callback) {
			// 	// #ifdef APP-PLUS
			// 	plus.io.resolveLocalFileSystemURL(path, function(entry) {
			// 		entry.file(function(file) {
			// 			var fileReader = new plus.io.FileReader();
			// 			//alert("getFile:" + JSON.stringify(file));
			// 			fileReader.readAsDataURL(file);
			// 			fileReader.onloadend = function(evt) {
			// 				// console.log(JSON.stringify(evt.target.result)); base64字符串  
			// 				callback(evt.target.result);
			// 			}
			// 		})
			// 	})
			// 	// #endif
			 
			 
			// 	// #ifdef H5
			// 	var img = new Image();
			// 	img.src = path;
			// 	img.onload = function() {
			// 		//默认按比例压缩
			// 		var w = this.width,
			// 			h = this.height;
			// 		var quality = 0.95; // 默认图片质量为0.7
			 
			// 		//生成canvas
			// 		var canvas = document.createElement('canvas');
			// 		var ctx = canvas.getContext('2d');
			 
			// 		// 创建属性节点
			// 		canvas.setAttribute("width", w);
			// 		canvas.setAttribute("height", h);
			 
			// 		ctx.drawImage(this, 0, 0, w, h);
			// 		// quality值越小，所绘制出的图像越模糊
			// 		var base64 = canvas.toDataURL('image/jpeg', quality);
			// 		// 回调函数返回base64的值
			// 		callback(base64);
			// 	};
			// 	// #endif
			// },
			
		},
		onLoad(params) {
			
			this.status = params.status;
			if(this.status == 0 || this.status == 4 || this.status == 6 || this.status == 7 || this.status == 8) {
				
			}else{
				this.getapplyments();
			}
			// this.id = params.id
			if(this.status == 2) this.getpruser()
			if(this.status == 4) this.getbohui()
			if(this.status == 5) this.getpruser()
			if(this.status == 6) this.getpruser()
			// if(this.status != 1) this.getInfo()
			
		}
	}
</script>

<style lang="scss" scoped>
	.page{
		padding-bottom: 120rpx;
	}
	.bottom_box {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 750rpx;
		z-index:999;
		display: flex;
		button[loading]::before {
			align-self: center
		}
		button {
			display: flex;
			justify-content: center;
			align-item: center;
			padding: 0;
			border-radius: 0;
		}
	
		button::after {
			border: none;
		}
	
		.btn2 {
			width: 482rpx;
			height: 104rpx;
			line-height: 104rpx;
			text-align: center;
			background: #fe7a1f;
			color: #fff;
			font-size: 32rpx;
		}
	
		.btn1 {
			width: 268rpx;
			height: 104rpx;
			background: #e8e8e8;
			line-height: 104rpx;
			text-align: center;
			color: #ADADAD;
			font-size: 32rpx;
		}
	}
	.row3{
		width: 100%;
		padding: 48rpx 29rpx 31rpx;
		box-sizing: border-box;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.row {
		width: 100%;
		padding: 38rpx 29rpx 31rpx;
		box-sizing: border-box;
		display: flex;
		justify-content: space-between;
		border-bottom: 2rpx solid #f4f4f4;
		.left {
			font-size: 32rpx;
			line-height: 44rpx;
			color: #121212;
			font-weight: 700;
		}
		.right {
			width: calc(100% - 5em);
		}

		.right_input {
			width: 100%;
		}

		.right3 {
			display: flex;
			flex-wrap: wrap;
		}

		.row_key {
			display: flex;
			align-items: center;

			.text_type {
				width: 40rpx;
				text-align: center;
			}

			text {
				margin: 0rpx 10rpx;
			}
		}

		.right2 {
			display: flex;
			justify-content: space-between;

			>view:nth-child(1) {
				width: calc(100% - 40rpx);
				// text-align: right;
			}
		}
	}
	/deep/ .text2 {
		font-size: 32rpx;
		line-height: 44rpx;
		color: #A4A4A4;
	}
	
	.text3 {
		font-size: 32rpx;
		line-height: 44rpx;
		color: #121212;
	}
	
	.text1 {
		font-size: 32rpx;
		line-height: 44rpx;
		color: #666;
	}
	.img_list{
		display: flex;
		flex-wrap: wrap;
		padding: 0 38rpx;
		width: 100%;
		box-sizing: border-box;
		.img_row{
			width: 156rpx;
			height: 156rpx;
			margin-right: 16rpx;
			margin-bottom: 20rpx;
			position: relative;
			image{
				width: 156rpx;
				height: 156rpx;
			}
			.icon{
				position: absolute;
				right: -16rpx;
				top:-16rpx;
				z-index: 1;
				image{
					width: 32rpx;
					height: 32rpx;
				}
			}
			&:nth-child(4n) {
				margin-right: 0;
			}
		}
	}
	.zhezhao{
		position: fixed;
		    width: 100%;
		    height: 100%;
		    top: 0;
	}
	.bohui{
		font-size: 16px;
		    line-height: 22px;
		    font-weight: 700;
		color:red;
	}
	
	.saoma{
		width: 100%;
		padding: 38rpx 29rpx 31rpx;
		box-sizing: border-box;
		display: flex;
		justify-content: space-between;
		border-bottom: 2rpx solid #f4f4f4;
		text-align: center;
	}
	.qrcode {
	  /* #ifndef APP-NVUE */
	  display: flex;
	  /* #endif */
	  flex-direction: column;
	  align-items: center;
	  justify-content: center;
	  width: 750rpx;
	  padding: 32rpx 0;
	  background-color: #F0F0F0;
	}
	.text {
	  margin-top: 32rpx;
	  font-size: 32rpx;
	  color: #666666;
	}
	
	.form {
	  width: 686rpx;
	  padding: 32rpx;
	}
	
	.slider {
	  margin-left: 0;
	  margin-right: 0;
	}
	
	.button {
	  width: 690rpx;
	  margin-top: 32rpx;
	}
	
	.qrcode-box {
	  /* #ifndef APP-NVUE */
	  display: flex;
	  /* #endif */
	  flex-direction: column;
	  align-items: center;
	  justify-content: center;
	}
	.duohang{
		width: 253px;
		    height: 60px;
		    display: block;
		    position: relative;
		    font-size: 16px;
		    line-height: normal;
		    white-space: pre-wrap;
		    word-break: break-all;
	}
</style>
